import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Share from '@tencent/gh-qqnews-sdk/gh-qqnews-share';
import { TencentNewsReady } from './libs/ready';
import { setTitle } from '@tencent/gh-qqnews-sdk/gh-qqnews-jsapi';
import App from './App.vue';
import shareImage from '/share.jpg';
import ObserveVisibility from './libs/reports/report-exposure';
import ReportClick from './libs/reports/report-click';
import ReportView from './libs/reports/report-view';
import SentryVue from './libs/reports/sentry';
import beacon from './libs/reports/beacon';
import { name as PROJECT_NAME, shareURLTotal } from '../package.json';
// import { wxWork } from './libs/ua';
// if (wxWork) {
//   location.replace(`https://open.work.weixin.qq.com/wwopen/uriconfirm?uri=${encodeURIComponent(`${location.origin}${location.pathname}?ADTAG=wxwork`)}`);
// }
const app = createApp(App);
new SentryVue(app);
declare global {
  interface Window {
    Promise: any;
    TencentNews: any;
    [key: string]: any;
    share: Share;
  }
}
// 设置分享
window.share = new Share({
  title: '今天，我宣誓！',
  desc: '一起重温入党誓词',
  link: `https://news.qq.com/qqfile/qqnews_design/${shareURLTotal ? `_${
    Math.floor(Math.random() * shareURLTotal)
  }/` : ''}${PROJECT_NAME}/index.html?ADTAG=share`,
  // link: `${location.origin}${location.pathname}?ADTAG=share`,
  img: shareImage,
});
TencentNewsReady.then((tencentNews) => {
  setTitle('今天，我宣誓！');
  window.share.setActionBtn(1);
  // 透明webview 需要调用 enableSingleH5Share
  if (tencentNews.enableSingleH5Share) tencentNews.enableSingleH5Share(1);
});
app.directive('report-view', ReportView);
app.directive('report-exp', ObserveVisibility);
app.directive('report-click', ReportClick);
app.directive('btn', {
  mounted(el: HTMLElement, binding) {
    const ele = el;
    ele.classList.add('directive-btn');
    let matrix = getComputedStyle(ele).transform;
    if (matrix.indexOf('matrix(') === 0) {
      const data = matrix.substr(6).replace(/[^\d.,]/g, '')
        .split(',')
        .map(v => +v);
      data[0] *= .8;
      data[3] *= .8;
      matrix = `matrix(${data.toString()})`;
    } else if (matrix.indexOf('matrix3d(') === 0) {
      const data = matrix.substr(8).replace(/[^\d.,]/g, '')
        .split(',')
        .map(v => +v);
      data[0] *= .8;
      data[5] *= .8;
      data[10] *= .8;
      matrix = `matrix3d(${data.toString()})`;
    } else {
      matrix = 'scale(.8)';
    }
    ele.ontouchstart = () => {
      ele.style.transform = matrix;
    };
    ele.ontouchend = () => {
      ele.style.transform = '';
    };
    ele.addEventListener('click', () => {
      const reportEvent = ele.title || ele.classList[0];
      if (reportEvent) {
        beacon.report(reportEvent, {});
      }
      if (binding.arg === 'click' && typeof binding.value === 'function') {
        binding.value();
      }
    });
  },
});
app.use(VueAxios, axios).mount('#app');
